<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(floor,index) in floors" :key="index">
        <h3>{{floor.title}}</h3>
        <ul>
          <li v-for="(item,i) in floor.items" :key="index">
            <h5>商品名称:{{item.itemName}}</h5>
            <p>商品价格:{{item.itemPrice}}</p>
            <p>商品特点：{{item.itemDesc}}</p>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <script src="./vue.js"></script>
  <script>
    const vm = new Vue({
      el:'#app',
      data:{
       floors: [
         {
           title:"手机",
           items:[
             {
               itemName:'手机-1',
               itemPrice: 1000,
               itemDesc:"手机好漂亮"
             },
             {
               itemName:'手机-2',
               itemPrice: 2000,
               itemDesc:"手机好漂亮"
             },
           ]
         },
         {
           title:"电脑",
           items:[
             {
               itemName:'电脑-1',
               itemPrice: 3000,
               itemDesc:"电脑好漂亮"
             },
             {
               itemName:'电脑-2',
               itemPrice: 4000,
               itemDesc:"电脑好漂亮"
             },
           ]
         }
       ]
      }
    })
  </script>
</body>
</html>
